import React,{Component} from 'react';
import {connect} from 'react-redux';
import {fetchList} from '../actions/newslist';

class NewsList extends Component{
   
    componentWillMount(){
        // console.log(this.props)
        this.props.fetchList()
         console.log(fetchList)
      }
    render(){
        const { lists, fetchList} = this.props;
       var list=[];
       console.log(111,lists)
       if(lists.docs){
           if(lists.docs.length<6){
                for(let i=0;i<lists.docs.length;i++){
                    // console.log(lists.docs[i].title)
                    list.unshift(
                        <div className="panel panel-default" key={i}>
                            <div className="panel-heading">
                                <h4 className="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" 
                                    href={'#collapse'+i}>
                                    {lists.docs[i].title}
                                    </a>
                                </h4>
                            </div>
                            <div id={"collapse"+i} className="panel-collapse collapse">
                                <div className="panel-body">
                                    {lists.docs[i].content}
                                </div>
                            </div>
                        </div>
                    ) 
                }
           
            }else{
                for(let i=lists.docs.length-1;i>lists.docs.length-7;i--){
                    // console.log(lists.docs[i].title)
                    list.push(
                        <div className="panel panel-default" key={i}>
                            <div className="panel-heading">
                                <h4 className="panel-title">
                                    <a data-toggle="collapse" data-parent="#accordion" 
                                    href={'#collapse'+i}>
                                    {lists.docs[i].title}
                                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{lists.docs[i].date}</span>
                                    </a>
                                </h4>
                            </div>
                            <div id={"collapse"+i} className="panel-collapse collapse">
                                <div className="panel-body">
                                    {lists.docs[i].content}
                                </div>
                            </div>
                        </div>
                    ) 
                }
            }
       }else{
        
       }
    //    for(let i = 0; i < lists.docs.length; i++){

    //    }
    //    console.log(list)

        return(
            <div>
                <h2>最新新闻</h2>
                <div id='iframewrapper'>
                    <div className="panel-group" id="accordion">
                        {list}
                    </div>
                </div>
                

                
            </div>
        )
        
    }
}
const getValue = state => {
    // console.log(3333,state.newslist);
    console.log(state.newslist)
    return {
      lists: state.newslist.lists,
    };
  };
export default connect(getValue, { fetchList})(NewsList);